<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/invoice.css" />
    <link rel="stylesheet" type="text/css" href="css/font.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />

    <!-- <link rel="stylesheet" type="text/css" href="css/comm-user.css"> -->
    <link rel="stylesheet" type="text/css" href="css/iziModal.css" />
    <link rel="stylesheet" type="text/css" href="css/footer.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-table.css">
  <link rel="stylesheet" href="css/medium.css?0905">
    <title>维亚生物试剂</title>
  </head>
  <body
    class="d-flex flex-column"
    style="background-color: #ffffff;min-height: 100vh;justify-content: space-between;"
  >

    <!-- pc头部搜索，banner -->
    <div class="pcHeader d-flex flex-column align-items-center">

      <!-- 搜索 -->
      <div class="headerContainer d-flex justify-content-center align-items-center">
        <div class="searchInout d-flex justify-content-between align-items-center">
          <input type="text" placeholder="请输入货号、cas号、smiles 号、关键词">
          <img src="./image/search.png" alt="">
        </div>
        <div class="inpuRight d-flex justify-content-between align-items-center">
          <h4>结构搜索</h4>
          <img src="./image/zhuce.png" alt="">
          <img src="./image/car.png" alt="">
        </div>
      </div>
      <!-- 导航 -->
      <div class="pcNaver d-flex">
        <div class="d-flex justify-content-between">
          <a href="./index.html" class="">首页</a>
          <a href="#!" class="">体外诊断试剂</a>
          <a href="./menulist.html" class="">药研试剂</a>
          <a href="./dingzhi.html" class="">定制服务</a>
          <a href="./linkme.html" class="active">联系我们</a>
        </div>
      </div>
    </div>
    <div style="height: 169px;"></div>
    <!-- 中间内容 -->
    <main class="mainContainer">
      <div class="container-fluid" >
        <!-- 发票信息弹窗 -->
        <div id="modal-custom" class="invoice_Modal">
          <button data-iziModal-close class="icon-close">
            <i class="bi bi-x-lg"></i>
          </button>
          <div class="invoice_Modal_header">
            <img src="./image/invoice.png" alt="">
            <span style="margin-left: 12px;">发票信息</span>
          </div>
          <div class="d-flex flex-row invoce_type_container">
            <div class="invoce_type_active">增值税专用发票</div>
            <div class="invoce_type">增值税普通发票</div>
          </div>
          <div class="invoce_content">
            <div class="mb-4" style="width: 100%;">
              <div class="flex-fill invoce_Input">
                <label for="inputEmail4">发票抬头</label>
                <input type="text" placeholder="输入公司名称" />
              </div>
            </div>
            <div class="mb-4" style="width: 100%;">
              <div class="flex-fill invoce_Input">
                <label for="inputEmail4">纳税人识别号</label>
                <input type="text" placeholder="输入纳税人识别号" />
              </div>
            </div>
            <div class="mb-4" style="width: 100%;">
              <div class="flex-fill invoce_Input">
                <label for="inputEmail4">注册地址</label>
                <input type="text" placeholder="输入单位注册地址" />
              </div>
            </div>
            <div class="mb-4" style="width: 100%;">
              <div class="flex-fill invoce_Input">
                <label for="inputEmail4">注册电话</label>
                <input type="text" placeholder="输入单位注册电话" />
              </div>
            </div>
            <div class="mb-4" style="width: 100%;">
              <div class="flex-fill invoce_Input">
                <label for="inputEmail4">开户银行</label>
                <input type="text" placeholder="输入开户银行" />
              </div>
            </div>
            <div class="mb-4" style="width: 100%;">
              <div class="flex-fill invoce_Input">
                <label for="inputEmail4">银行账户</label>
                <input type="text" placeholder="输入银行账户" />
              </div>
            </div>
            <div class="custom-control custom-radio d-flex">
              <input type="radio" name="setdefault" id="setdefault1" class="custom-control-input">
              <label class="custom-control-label" for="setdefault1">设为默认</label>
            </div>
          </div>
          <div class="d-flex align-items-center justify-content-center" style="margin-top: 40px;">
            <button class="invoice_Modal_comfirm submit">确认</button>
            <button class="invoice_Modal_cancel" data-iziModal-close>
              取消
            </button>
          </div>
        </div>

        <!-- 收货地址弹窗 -->
        <div id="modal-address" class="address_Modal">
          <button data-iziModal-close class="icon-close">
            <i class="bi bi-x-lg"></i>
          </button>
          <div class="invoice_Modal_header">
            <img src="./image/location.png" alt="">
            <span style="margin-left: 12px;">添加地址</span>
          </div>
          <div class="address_content">
            <form>
              <div class="form-group row mb-4">
                <label for="staticEmail" class="col-sm-3 col-form-label">所在地区</label>
                <div class="col-sm-9 container flex-1">
                  <div class="row">
                    <select id="province" class="form-control col" placeholder="省份" style=" -webkit-appearance: none;">
                      <option selected>广东</option>
                      <option>北京</option>
                    </select>
                    <select id="city" class="form-control col" placeholder="城市" style=" -webkit-appearance: none;">
                      <option>东莞</option>
                    </select>
                    <select id="area" class="form-control col" placeholder="区/县" style=" -webkit-appearance: none;">
                      <option>长安</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="form-group row mb-4">
                <label for="staticEmail" class="col-sm-3 col-form-label">详细地址</label>
                <div class="col-sm-9 flex-1">
                  <textarea class="form-control" id="address_address" rows="3"></textarea>
                </div>
              </div>
              <div class="form-group row mb-4">
                <label for="inputPassword" class="col-sm-3 col-form-label">收货人</label>
                <div class="col-sm-9 flex-1">
                  <input type="text" class="form-control" id="address_user" value="">
                </div>
              </div>
              <div class="form-group row mb-4">
                <label for="inputPassword" class="col-sm-3 col-form-label">手机号码</label>
                <div class="col-sm-9 flex-1">
                  <input type="number" class="form-control" id="address_phone" value="">
                </div>
              </div>
              <div class="custom-control custom-radio d-flex">
                <input type="radio" name="setdefault" id="setdefault1" class="custom-control-input">
                <label class="custom-control-label" for="setdefault1">设为默认</label>
              </div>
            </form>
          </div>
          <div class="d-flex align-items-center justify-content-center" style="margin-top: 40px;">
            <button class="invoice_Modal_comfirm submit">确认</button>
            <button class="invoice_Modal_cancel" data-iziModal-close>
              取消
            </button>
          </div>
        </div>

        <!-- 更换手机号 -->
        <div id="modal-phone" class="editPhone_Modal">
          <div class="editPhone_Modal_header">
            <img src="./image/editphone.png" alt="">
            <span style="margin-left: 12px;">更换手机号</span>
          </div>
          <div class="editPhone_Modal_content">
            <div class="input-group mb-3 login-input">
              <div class="login-input-left">
                <span>+86</span>
              </div>
              <input
                type="text"
                class="login-input-container"
                placeholder="请输入手机号"
                aria-label="+86"
                aria-describedby="basic-addon2"
              />
            </div>
            <div class="input-group mb-3 login-input">
              <div class="login-input-left">
                <i style="font-size: 30px;" class="bi bi-shield-check"></i>
              </div>
              <input
                type="number"
                class="login-input-container"
                placeholder="请输入手机验证码"
              />
              <div class="login-input-right">
                <span style="cursor: pointer;">获取验证码</span>
              </div>
            </div>
          </div>
          <div class="d-flex align-items-center justify-content-center">
            <button class="editPhone_Modal_cancel" data-iziModal-close>取消</button>
            <button class="editPhone_Modal_comfirm">确认</button>
          </div>
        </div>

        <!-- 更换邮箱 -->
        <div id="modal-email" class="editEmail_Modal">
          <div class="editPhone_Modal_header">
            <img src="./image/editEmail.png" alt="">
            <span style="margin-left: 12px;">更换邮箱</span>
          </div>
          <div class="editPhone_Modal_content">
            <div class="input-group mb-3 login-input">
              <div class="login-input-left">
                <i style="font-size: 30px;" class="bi bi-envelope"></i>
              </div>
              <input
                type="text"
                class="login-input-container"
                placeholder="请输入邮箱"
              />
            </div>
          </div>
          <div class="d-flex align-items-center justify-content-center">
            <button class="editPhone_Modal_cancel" data-iziModal-close>取消</button>
            <button class="editPhone_Modal_comfirm">确认</button>
          </div>
        </div>

         <!-- 询价订单递交成功提示弹窗 -->
         <div id="modal-cartFinish" class="editCartFinish_Modal">
          <button data-iziModal-close class="icon-close" style="top: -140px">
            <i class="bi bi-x-lg"></i>
          </button>
          <div class="modal-cartFinish_Modal_content">
            <div>您的询价订单已递交</div>
            <div style="margin: 20px 0;">我们将安排销售人员尽快与您联系</div>
            <div>请保持电话畅通</div>
          </div>
        </div>

        <div class="row">
          <div style="width:18%">
            <div class="left_container">
              <div class="left_container_title">个人中心</div>
              <div class="item item_active" data-type="basicinfo"><div>基本信息</div></div>
              <div class="item" data-type="company">公司资料</div>
              <div class="item" data-type="order">我的订单</div>
              <div class="item" data-type="cart">我的购物车</div>
              <div class="item" data-type="address">收货地址</div>
              <div class="item"  data-type="invoice" class="trigger-custom">发票信息</div>
              <div class="item" data-type="favorite">我的收藏</div>
              <div class="item" data-type="wechat">绑定微信/绑定企业微信</div>
            </div>
          </div>
          <div style="width:82%">
            <div class="right_container">
              <div class="basic_info_header">
                <div class="flex_row">
                  <div class="avatar">
                    <img src="./image/zhuce.png" alt="" srcset="" />
                  </div>
                  <div class="name">用户001</div>
                </div>
                <div class="exit">退出</div>
              </div>
              <!-- 基本信息 -->
              <div class="basic_info content" id="basic" style="display: block">
                <div class="title_container">基本信息</div>
                <div class="content_container">
                  <form class="form-inline">
                    <div
                      class="d-flex justify-content-between mb-5"
                      style="width: 100%"
                    >
                      <div class="form-group p-2 flex-fill">
                        <label for="inputEmail4">用户名:</label>
                        <input type="text" class="form-control" id="account" />
                      </div>
                      <div class="form-group p-2 flex-fill">
                        <label for="inputEmail4">真实姓名:</label>
                        <input type="text" class="form-control" id="name" />
                      </div>
                    </div>
                    <div
                      class="d-flex justify-content-between"
                      style="width: 100%"
                    >
                      <div class="form-group flex_row p-2 flex-fill">
                        <label for="inputEmail4">手机号:</label>
                        <div class="pl-3 pr-3">18101888888</div>
                        <div class="text-primary editphone" style="cursor: pointer">
                          更换手机号
                        </div>
                      </div>
                      <div class="form-group flex_row p-2 flex-fill">
                        <label for="inputEmail4">电子邮箱:</label>
                        <div class="pl-3 pr-3">123456@163.com</div>
                        <div class="text-primary editemail" style="cursor: pointer">
                          更换邮箱
                        </div>
                      </div>
                    </div>
                  </form>
                  <button type="submit" class="btn btn-primary submitBtn">
                    提交修改
                  </button>
                </div>
              </div>
              <!-- 公司资料 -->
              <div class="content" id="company" style="display: none">
                <div class="title_container">公司资料</div>
                <div class="content_container">
                  <form class="form-inline">
                    <div class="row mx-md-n5">
                      <div class="col px-md-5">
                        <div class="p-2 clearfix">
                          <div class="p-2 flex-fill companyInput">
                            <label for="inputEmail4">公司名称:</label>
                            <input type="text" id="companyname" />
                          </div>
                        </div>
                      </div>
                      <div class="col px-md-5">
                        <div class="p-2 clearfix">
                          <div class="p-2 flex-fill companyInput">
                            <label for="inputEmail4">公司税号:</label>
                            <input type="text" id="tax" />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row mx-md-n5">
                      <div class="col px-md-5">
                        <div class="p-2 clearfix">
                          <div class="p-2 flex-fill companyInput">
                            <label for="inputEmail4">公司地址:</label>
                            <input type="text" id="address" />
                          </div>
                        </div>
                      </div>
                      <div class="col px-md-5">
                        <div class="p-2 clearfix">
                          <div class="p-2 flex-fill companyInput">
                            <label for="inputEmail4">公司座机:</label>
                            <input type="text" id="phone" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                  <button type="submit" class="btn btn-primary submitBtn">
                    提交修改
                  </button>
                </div>
              </div>
              <!-- 我的订单 -->
              <div class="content" id="order" style="display: none">
                <div class="title_container">我的订单</div>
                <nav class="navbar navbar-expand-lg navbar-light order_nav">
                  <button
                    class="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarTogglerDemo01"
                    aria-controls="navbarTogglerDemo01"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                  >
                    <span class="navbar-toggler-icon"></span>
                  </button>
                  <div
                    class="collapse navbar-collapse row d-flex align-items-center"
                    id="navbarTogglerDemo01"
                  >
                    <!-- <a class="navbar-brand" href="#">Hidden brand</a> -->
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0 col-7">
                      <li class="nav-item">
                        <a class="nav-link order_active" href="#"
                          >全部订单(0) <span class="sr-only">(current)</span></a
                        >
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">待确认(0)</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">待付款(0)</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">待发货(0)</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">已收货(0)</a>
                      </li>
                    </ul>
                    <form
                      class="form-inline my-4 my-lg-0 search_container col-5"
                    >
                      <input
                        class="mr-sm-2"
                        type="search"
                        placeholder="(可以根据商品名称、订单号、CAS No对订单进行搜索)"
                        aria-label="Search"
                      />
                      <button class="btn btn-primary searchBtn" type="submit">
                        <i class="bi bi-search"></i>
                      </button>
                    </form>
                  </div>
                </nav>
                <ul class="list-group orderContainer mt-2">
                  <li class="list-group-item">
                    <div class="list_title">
                      <span class="order_no">订单编号 113454665623123</span>
                      <span class="order_time"
                        >下单时间 2024/07/28 12:07:22</span
                      >
                    </div>
                    <div class="list_container d-flex align-items-center">
                      <img
                        src="./image/oreder_Image.png"
                        class="rounded"
                        alt=""
                      />
                      <div class="list_container_header">
                        <h2 class="lead" style="font-weight: bold">BNP</h2>
                        <p class="lead">CAS NO:3355-53-2</p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <!-- 我的购物车 -->
              <div class="content" id="cart" style="display: none">
                <div class="title_container" style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
                  <div>购物车</div>
                  <div class="flex_row">
                    <span class="mr-4"><a href="#">【下载批量下单模板】</a> Excel上传批量加入购物车</span>
                    <button class="btn btn-success selectFileBtn mr-4" type="submit">
                      选择文件
                    </button>
                    <button class="btn btn-success addCartBtn" type="submit">
                      快速加入购物车
                    </button>
                  </div>

                </div>
                <div class="container">
                   <table id="grid" class="cart_table" data-header-style="headerStyle"></table>
                   <div class="flex_row cart_table_footer">
                      <span style="margin-left: 40px;">已选产品2件</span>
                      <div class="flex_row">
                        <span style="margin-right: 60px;">合计 (不含运费)</span>
                        <button class="cart_finishBtn">结算</button>
                      </div>
                   </div>
                </div>
              </div>
              <!-- 收货地址 -->
              <div class="content" id="address" style="display: none">
                <div class="title_container flex_row">
                  <div>收货地址</div>
                  <button class="btn btn-success addAddressBtn" type="submit">
                    添加新地址
                  </button>
                </div>
                <div class="flex_row border-bottom">
                  <div class="w-25 p-3" style="color: #575757">收货人</div>
                  <div class="w-25 p-3" style="color: #575757">收货地址</div>
                  <div class="w-25 p-3" style="color: #575757">收货人联系电话</div>
                  <div class="w-25 p-3" style="color: #575757">操作</div>
                  <div class="w-25 p-3" style="color: #575757">默认地址</div>
                </div>
              </div>
              <!-- 发票信息 -->
              <div class="content invoiceContainer" id="invoice" style="display: none">
                <div class="title_container flex_row">
                  <div>发票信息</div>
                  <button class="btn btn-success addInvoicecBtn" type="submit">
                    新增增值税发票
                  </button>
                </div>
                <div class="invoice_content">
                  <div class="invoice-group-item mb-2">
                    <div class="invoice-group-item-top">
                      <div class="invoice-group-item-title">开票信息</div>
                      <div class="flex_row">
                          <a style="color: #3062B9;text-decoration: underline;cursor: pointer;">编辑</a>
                          <a class="ml-5" style="color: #575757;cursor: pointer;">删除</a>
                      </div>
                    </div>
                    <div class="invoice-group_container">
                      <div class="flex_row" style="width: 100%;">
                        <div class="col-4">
                          <span style="margin-right: 40px;">发票抬头</span>
                          <span>xxxxxxxxx</span>
                        </div>
                        <div class="col-4">
                          <span style="margin-right: 40px;">纳税人识别号</span>
                          <span>xxxxxxxxx</span>
                        </div>
                        <div class="col-4">
                          <span style="margin-right: 40px;">注册地址</span>
                          <span>xxxxxxxxx</span>
                        </div>
                      </div>
                      <div class="flex_row" style="width: 100%;margin-top: 40px;">
                        <div class="col-4">
                          <span style="margin-right: 40px;">注册电话</span>
                          <span>xxxxxxxxx</span>
                        </div>
                        <div class="col-4">
                          <span style="margin-right: 40px;">开户银行</span>
                          <span>xxxxxxxxx</span>
                        </div>
                        <div class="col-4">
                          <span style="margin-right: 40px;">银行账户</span>
                          <span>xxxxxxxxx</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="invoice-group-item mb-2">
                    <div class="invoice-group-item-top">
                      <div class="invoice-group-item-title">开票信息</div>
                      <div class="flex_row">
                          <a style="color: #3062B9;text-decoration: underline;cursor: pointer;">编辑</a>
                          <a class="ml-5" style="color: #575757;cursor: pointer;">删除</a>
                      </div>
                    </div>
                    <div class="invoice-group_container">
                      <div class="flex_row" style="width: 100%;">
                        <div class="col-4">
                          <span style="margin-right: 40px;">发票抬头</span>
                          <span>xxxxxxxxx</span>
                        </div>
                        <div class="col-4">
                          <span style="margin-right: 40px;">纳税人识别号</span>
                          <span>xxxxxxxxx</span>
                        </div>
                        <div class="col-4">
                          <span style="margin-right: 40px;">注册地址</span>
                          <span>xxxxxxxxx</span>
                        </div>
                      </div>
                      <div class="flex_row" style="width: 100%;margin-top: 40px;">
                        <div class="col-4">
                          <span style="margin-right: 40px;">注册电话</span>
                          <span>xxxxxxxxx</span>
                        </div>
                        <div class="col-4">
                          <span style="margin-right: 40px;">开户银行</span>
                          <span>xxxxxxxxx</span>
                        </div>
                        <div class="col-4">
                          <span style="margin-right: 40px;">银行账户</span>
                          <span>xxxxxxxxx</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="invoice-group-item mb-2">
                    <div class="invoice-group-item-top">
                      <div class="invoice-group-item-title">开票信息</div>
                      <div class="flex_row">
                          <a style="color: #3062B9;text-decoration: underline;cursor: pointer;">编辑</a>
                          <a class="ml-5" style="color: #575757;cursor: pointer;">删除</a>
                      </div>
                    </div>
                    <div class="invoice-group_container">
                      <div class="flex_row" style="width: 100%;">
                        <div class="col-4">
                          <span style="margin-right: 40px;">发票抬头</span>
                          <span>xxxxxxxxx</span>
                        </div>
                        <div class="col-4">
                          <span style="margin-right: 40px;">纳税人识别号</span>
                          <span>xxxxxxxxx</span>
                        </div>
                        <div class="col-4">
                          <span style="margin-right: 40px;">注册地址</span>
                          <span>xxxxxxxxx</span>
                        </div>
                      </div>
                      <div class="flex_row" style="width: 100%;margin-top: 40px;">
                        <div class="col-4">
                          <span style="margin-right: 40px;">注册电话</span>
                          <span>xxxxxxxxx</span>
                        </div>
                        <div class="col-4">
                          <span style="margin-right: 40px;">开户银行</span>
                          <span>xxxxxxxxx</span>
                        </div>
                        <div class="col-4">
                          <span style="margin-right: 40px;">银行账户</span>
                          <span>xxxxxxxxx</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              <!-- 我的收藏 -->
              <div class="content" id="collection" style="display: none">
                <div class="title_container">我的收藏</div>
                <div class="content_container">
                  <div class="scroll_content_container">
                    <div class="dataitem">
                      <img src="./image/tu.png" alt="" class="centmisn" />
                      <p class="minceme">BNP</p>
                      <p class="cas">CAS NO.198835-06-2</p>
                      <p class="xunjia">¥询价</p>
                      <div
                        class="d-flex align-items-center justify-content-center"
                      >
                        <div
                          class="imgcar d-flex align-items-center justify-content-center"
                        >
                          <i class="bi bi-cart"></i>
                        </div>
                        <div
                          class="imgcar d-flex align-items-center justify-content-center activeicon"
                        >
                          <i class="bi bi-heart"></i>
                        </div>
                      </div>
                    </div>
                    <div class="dataitem">
                      <img src="./image/tu.png" alt="" class="centmisn" />
                      <p class="minceme">BNP</p>
                      <p class="cas">CAS NO.198835-06-2</p>
                      <p class="xunjia">¥询价</p>
                      <div
                              class="d-flex align-items-center justify-content-center"
                      >
                        <div
                                class="imgcar d-flex align-items-center justify-content-center"
                        >
                          <i class="bi bi-cart"></i>
                        </div>
                        <div
                                class="imgcar d-flex align-items-center justify-content-center activeicon"
                        >
                          <i class="bi bi-heart"></i>
                        </div>
                      </div>
                    </div>
                    <div class="dataitem">
                      <img src="./image/tu.png" alt="" class="centmisn" />
                      <p class="minceme">BNP</p>
                      <p class="cas">CAS NO.198835-06-2</p>
                      <p class="xunjia">¥询价</p>
                      <div
                              class="d-flex align-items-center justify-content-center"
                      >
                        <div
                                class="imgcar d-flex align-items-center justify-content-center"
                        >
                          <i class="bi bi-cart"></i>
                        </div>
                        <div
                                class="imgcar d-flex align-items-center justify-content-center activeicon"
                        >
                          <i class="bi bi-heart"></i>
                        </div>
                      </div>
                    </div>  <div class="dataitem">
                    <img src="./image/tu.png" alt="" class="centmisn" />
                    <p class="minceme">BNP</p>
                    <p class="cas">CAS NO.198835-06-2</p>
                    <p class="xunjia">¥询价</p>
                    <div
                            class="d-flex align-items-center justify-content-center"
                    >
                      <div
                              class="imgcar d-flex align-items-center justify-content-center"
                      >
                        <i class="bi bi-cart"></i>
                      </div>
                      <div
                              class="imgcar d-flex align-items-center justify-content-center activeicon"
                      >
                        <i class="bi bi-heart"></i>
                      </div>
                    </div>
                  </div>

                    <div class="dataitem">
                      <img src="./image/tu.png" alt="" class="centmisn" />
                      <p class="minceme">BNP</p>
                      <p class="cas">CAS NO.198835-06-2</p>
                      <p class="xunjia">¥询价</p>
                      <div
                        class="d-flex align-items-center justify-content-center"
                      >
                        <div
                          class="imgcar d-flex align-items-center justify-content-center"
                        >
                          <i class="bi bi-cart"></i>
                        </div>
                        <div
                          class="imgcar d-flex align-items-center justify-content-center activeicon"
                        >
                          <i class="bi bi-heart"></i>
                        </div>
                      </div>
                    </div>
                    <div class="dataitem">
                      <img src="./image/tu.png" alt="" class="centmisn" />
                      <p class="minceme">BNP</p>
                      <p class="cas">CAS NO.198835-06-2</p>
                      <p class="xunjia">¥询价</p>
                      <div
                        class="d-flex align-items-center justify-content-center"
                      >
                        <div
                          class="imgcar d-flex align-items-center justify-content-center"
                        >
                          <i class="bi bi-cart"></i>
                        </div>
                        <div
                          class="imgcar d-flex align-items-center justify-content-center activeicon"
                        >
                          <i class="bi bi-heart"></i>
                        </div>
                      </div>
                    </div>
                    <div class="dataitem">
                      <img src="./image/tu.png" alt="" class="centmisn" />
                      <p class="minceme">BNP</p>
                      <p class="cas">CAS NO.198835-06-2</p>
                      <p class="xunjia">¥询价</p>
                      <div
                        class="d-flex align-items-center justify-content-center"
                      >
                        <div
                          class="imgcar d-flex align-items-center justify-content-center"
                        >
                          <i class="bi bi-cart"></i>
                        </div>
                        <div
                          class="imgcar d-flex align-items-center justify-content-center activeicon"
                        >
                          <i class="bi bi-heart"></i>
                        </div>
                      </div>
                    </div>
					<div class="dataitem">
                      <img src="./image/tu.png" alt="" class="centmisn" />
                      <p class="minceme">BNP</p>
                      <p class="cas">CAS NO.198835-06-2</p>
                      <p class="xunjia">¥询价</p>
                      <div
                        class="d-flex align-items-center justify-content-center"
                      >
                        <div
                          class="imgcar d-flex align-items-center justify-content-center"
                        >
                          <i class="bi bi-cart"></i>
                        </div>
                        <div
                          class="imgcar d-flex align-items-center justify-content-center activeicon"
                        >
                          <i class="bi bi-heart"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 绑定微信/绑定企业微信 -->
              <div class="content" id="wechat" style="display: none">
                <div class="title_container">绑定微信/绑定企业微信</div>
                <div class="content_container">
                  <p class="font-weight-normal">
                    通过扫描二维码即可通过手机微信、企业微信等获取相关信息，并及时查看订单信息。
                  </p>
                  <div class="mt-4">
                    <img
                      src="./image/qrcode.png"
                      class="rounded mx-auto d-block qrcode"
                      alt="qrcode"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- footer -->
    <footer class="d-flex justify-content-center align-items-center flex-wrap">
      <ul>
        <li class="topbig"><a href="#!">产品中心</a></li>
        <li><a href="#!">体外诊断试剂</a></li>
        <li><a href="#!"> 药研试剂</a></li>
        <li><a href="#!">定制服务</a></li>
      </ul>
      <div class="line"></div>
      <ul>
        <li class="topbig"><a href="#!">友情链接</a></li>
        <li><a href="https://www.vivabioinnovator.com">维亚生物创新中心</a></li>
        <li><a href="https://www.langhuapharma.com">朗华制药</a></li>
        <li><a href="https://synmedchem.com">信实医药</a></li>
      </ul>
      <div class="line"></div>
      <ul>
        <li class="topbig"><a href="#!">关注我们</a></li>
        <div class="d-flex align-items-center sunsnediv">
          <div class="cicleine d-flex align-items-center justify-content-center weixnimg">
            <img src="./image/weixin.png" alt="" srcset="">
            <div class="hidden-div">
              <p class="shahr">微信扫一扫：分享</p>
              <img src="./image/ewm.jpg" alt="">
              <p>扫一扫关注公众号</p>
            </div>
          </div>
          <div class="cicleine d-flex align-items-center justify-content-center insimg">
            <a href="https://www.linkedin.cn/incareer/company/14402828/admin" target="_blank">
            <img src="./image/ins.png" alt="" srcset="">
            </a>
          </div>
          <div class="cicleine d-flex align-items-center justify-content-center insimg">
            <a href="https://twitter.com/viva_biotech" target="_blank">
            <img src="./image/twitter.png" alt="" srcset="">
          </a>
          </div>
        </div>

      </ul>
      <div class="line"></div>
      <ul>
        <li class="topbig"><a href="#!">联系我们</a></li>
      </ul>
    </footer>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/index.js"></script>
    <script src="js/iziModal.min.js" type="text/javascript"></script>
    <script src="js/bootstrap-table.js"></script>
    <script src="js/bootstrap-table-zh-CN.js"></script>
    <script>

        $(".closenr").click(function () {
            $(".mobilelist").removeClass('slide-right')
            $(".mobilelist").addClass('slide-out-left')
            setTimeout(function () {
              $(".mobilelist").css('display', 'none');
            },1000)


          })
          $(".seting").click(function () {
          $(".mobilelist").removeClass('slide-out-left')
          $(".mobilelist").css('display', 'block');
          $(".mobilelist").addClass('slide-right')
      });

      window.onresize = function () {
        if (window.innerWidth > 800) {
          $(".chakageng").css('display', 'none');

        } else {
          $(".chakageng").css('display', 'blcok');
        }
      };
      window.dispatchEvent(new Event('resize'));


      $("#modal-custom").iziModal({
        overlayClose: false,
        width: 750,
        padding: 30,
        autoOpen: false,
        transitionIn: 'transitionIn',
        transitionOut: 'transitionOut',
        overlayColor: "rgba(0, 0, 0, 0.4)",
        onOpened: function () {
          console.log("onOpened");
        },
        onClosed: function () {
          $('#modal-custom').addClass('invoice_Modal')
        },
      });

      $("#modal-address").iziModal({
        overlayClose: false,
        width: 750,
        padding: 60,
        autoOpen: false,
        transitionIn: 'transitionIn',
        transitionOut: 'transitionOut',
        overlayColor: "rgba(0, 0, 0, 0.4)",
        onOpened: function () {
          console.log("onOpened");
        },
        onClosed: function () {
          $('#modal-address').addClass('address_Modal')
        },
      });

      $("#modal-phone").iziModal({
        overlayClose: false,
        // width: 627,
        padding: 0,
        autoOpen: false,
        // transitionIn: 'transitionIn',
        //transitionOut: 'transitionOut',
        overlayColor: "rgba(0, 0, 0, 0.4)",
        onOpened: function () {
          console.log("onOpened");
        },
        onClosed: function () {
          // $('#modal-phone').addClass('editPhone_Modal')
        },
      });

      $("#modal-email").iziModal({
        overlayClose: false,
        width: 627,
        padding: 0,
        autoOpen: false,
        transitionIn: 'transitionIn',
        transitionOut: 'transitionOut',
        overlayColor: "rgba(0, 0, 0, 0.4)",
        onOpened: function () {
          console.log("onOpened");
        },
        onClosed: function () {
          $('#modal-email').addClass('editEmail_Modal')
        },
      });

      $("#modal-cartFinish").iziModal({
        overlayClose: false,
        width: 559,
        padding: 0,
        autoOpen: false,
        transitionIn: 'transitionIn',
	      transitionOut: 'transitionOut',
        overlayColor: "rgba(0, 0, 0, 0.4)",
        onOpened: function () {
          console.log("onOpened");
        },
        onClosed: function () {
          $('#modal-cartFinish').addClass('editCartFinish_Modal')
        },
      });

      $(".addAddressBtn").click(function(){
        $("#modal-address").iziModal("open");
      });

      $(".addInvoicecBtn").click(function(){
        $("#modal-custom").iziModal("open");
      });

      $(".editphone").click(function(){
        $("#modal-phone").iziModal("open");
      });

      $(".editemail").click(function(){
        $("#modal-email").iziModal("open");
      });

      $(".cart_finishBtn").click(function(){
        $("#modal-cartFinish").iziModal("open");
      });

      const items = document.querySelectorAll(".item");
      const contents = document.querySelectorAll(".content");

      var selectedItem = null;

      items.forEach((item, index) => {
        var dataType = $(item).data('type');
        item.addEventListener("click", () => {
          console.log(item.innerHTML);
          const name = item.innerHTML;
          items.forEach((item) => {
            item.classList.remove("item_active");
          });
          item.classList.add("item_active");

          // if (name === "发票信息") {
          //   $("#modal-custom").iziModal("open");
          // }

          if (name === "我的购物车") {
            InitMainTable();
          }

          contents.forEach((content, contentIndex) => {
            if (index === contentIndex) {
              contents.forEach((content) => {
                content.style.display = "none";
              });
              content.style.display = "block";
            }
          });

          ph.changeURLStatic('func',dataType);
        });


        var qp = ph.queryString('func');
        if(qp!=null && qp == dataType){
          selectedItem = $(item) ;
        }
      });


    if(selectedItem!=null){
      console.log('hit func');
      selectedItem.trigger('click');
    }


    var $table;
    //初始化bootstrap-table的内容
    function InitMainTable () {
        //记录页面bootstrap-table全局变量$table，方便应用
        // var queryUrl = '/TestUser/FindWithPager?rnd=' + Math.random()
        var json = [
            {
                "id": 1,
                "url": "/Static/",
                "name": "BNP",
                "describe": "CAS NO:33755-53-2",
                "type": "5mg",
                "buytype": "询价",
                "number": 1,
                "date": "2024.7.15"
            },
            {
                "id": 1,
                "url": "/Static/",
                "name": "BNP",
                "describe": "CAS NO:33755-53-2",
                "type": "5mg",
                "buytype": "询价",
                "number": 2,
                "date": "2024.7.15"
            },
        ];
        $table = $('#grid').bootstrapTable({
            data: json,                      //请求后台的URL（*）
            // method: 'GET',                      //请求方式（*）
            //toolbar: '#toolbar',              //工具按钮用哪个容器
            striped: false,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: false,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            pageSize: 10,                     //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: false,                      //是否显示表格搜索
            strictSearch: false,
            showColumns: false,                  //是否显示所有的列（选择显示的列）
            showRefresh: false,                  //是否显示刷新按钮
            showFooter: false,
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            // 得到查询的参数
            // queryParams : function (params) {
            //     //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            //     var temp = {
            //         rows: params.limit,                         //页面大小
            //         page: (params.offset / params.limit) + 1,   //页码
            //         sort: params.sort,      //排序列名
            //         sortOrder: params.order //排位命令（desc，asc）
            //     };
            //     return temp;
            // },
            columns: [{
                checkbox: true,
                visible: true                  //是否显示复选框
            }, {
                field: 'url',
                title: '',
                width: 50,
                formatter: imageFormatter
            }, {
                field: 'name',
                title: '产品信息',
                formatter: Formatter
            }, {
                field: 'type',
                title: '规格',
            }, {
                field: 'buytype',
                title: '单价'
            }, {
                field: 'number',
                title: '数量',
                sortable: true,
                formatter: numberFormatter,
                events: {
                  'click .minus-btn': function(e, value, row, index) {
                      if(json[index].number === 0) return;
                      json[index].number = json[index].number - 1;
                      // 重新加载表格数据
                      $table.bootstrapTable('load', json);
                  },
                  'click .plus-btn': function(e, value, row, index) {
                      if(json[index].number === 0) return;
                      json[index].number = json[index].number + 1;
                      // 重新加载表格数据
                      $table.bootstrapTable('load', json);
                  }
                }
            }, {
                field: 'total',
                title: '总价',
                formatter: totalFormatter
            }, {
                field: 'date',
                title: '时间'
            }],
            onLoadSuccess: function () {
            },
            onLoadError: function () {
                console.log("数据加载失败！");
            },
            onDblClickRow: function (row, $element) {
                var id = row.ID;
            },
        });
    };

    function imageFormatter(value, row, index) {
      return `<img src="./image/oreder_Image.png" alt="" class="rounded" />`
    }

    function Formatter(value, row, index) {
      return `
        <div class="list_container_header">
          <h2 class="lead" style='font-weight: bold'>${row.name}</h2>
          <p class="lead">${row.describe}</p>
        </div>`
    }

    function numberFormatter(value, row, index) {
      return `
        <div class="input-group">
          <button class="btn btn-outline-secondary minus-btn" data-set type="button">-</button>
          <input type="text" class="form-control text-center cartTable_NumberInput" value="${row.number}">
          <button class="btn btn-outline-secondary plus-btn" type="button">+</button>
        </div>
      `
    }

    function totalFormatter(value, row, index) {
      return "<a href='#' title='询价' target='_blank'>询价</a>";
    }

    function headerStyle(column) {
      return {
        id: {
          classes: 'cartTable_header'
        },
        url: {
          classes: 'cartTable_header'
        },
        name: {
          classes: 'cartTable_header'
        },
        type: {
          classes: 'cartTable_header'
        },
        buytype: {
          classes: 'cartTable_header'
        },
        number: {
          classes: 'cartTable_header'
        },
        total: {
          classes: 'cartTable_header'
        },
        date: {
          classes: 'cartTable_header'
        }
      }[column.field]
    }
  </script>
  </body>
</html>
